<template>
	<view class="body">
		<view class="cards">
			<swiper  class="banner-swiper screen-swiper square-dot"
			:indicator-dots="true"
			:autoplay="false"
			:interval="1500"
			:duration="500"
			style="height: 300rpx !important;"
			
			>
				<swiper-item>
					<view class="swiper-item">
						<view v-for="item,index in navone" :key="index" class="card" @click="onGoInfo(item)">
							<img :src="item.image" style="width: 80rpx;height: 80rpx;margin-bottom: 10rpx;" alt="">
							<span style="font-size: 28rpx;">{{item.name}}</span>
						</view>
					</view>
				</swiper-item>
				<swiper-item v-if="navDatas.length > 10">
					<view class="swiper-item">
						<view v-for="item,index in navtwo" :key="index" class="card" @click="onGoInfo(item)">
							<img :src="item.image" style="width: 80rpx;height: 80rpx;margin-bottom: 10rpx;" alt="">
							<span style="font-size: 28rpx;">{{item.name}}</span>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				navDatas:uni.getStorageSync('activity_list'),
				navone:[],
				navtwo:[],
			}
		},
		created() {
			if(this.navDatas.length > 10){
				let arr = this.navDatas
				this.navone = arr.slice(0,10)
				this.navtwo = arr.slice(10,20)
			}else{
				this.navone = this.navDatas
			}
		},
		methods:{
			onGoInfo(e){
				if(e.url.length > 14) {
					this.$Router.push({
						path: "/pages/goods/categorydetailmodel",
						query: { id: e.productCategories,name:e.name}
					});
				}
				switch(e.url){
					case 'prepaid':
					uni.showToast({
						icon:'none',
						title:'敬请期待'
					})
					break
					case 'category' :
					uni.switchTab({ url:'/pages/index/category'})
					break
					case 'student' :
					this.$Router.push({path: '/pages/goods/students'})
					break
					case 'nineNine' : 
					this.$Router.push({path: '/pages/goods/ninearea'}) 
					break
					case 'coupon' :
					this.jump('/pages/goods/coupon')
					break
					case 'prize' :
					this.jump('/pages/tuandui/lottery')
					break
					case 'storeLike' :
					this.jump('/pages/user/storefavorite') 
					break
					case 'productLike' : 
					this.jump('/pages/user/favorite') 
					break
					case 'browse' : 
					this.$emit('changeCurrent') 
					break
					case 'derivative' :
					if(uni.getStorageSync('UId') > 0 && uni.getStorageSync('hasDerivative')){
						this.$Router.push({
							path: '/pages/goods/smaillHome',
							query: {
								ownerId: uni.getStorageSync('UId')
							}
						})
					}else{
						uni.showToast({
							title:'您未开通小店',
							icon:'error'
						})
						break
					}
					case 'dhadmin': 
					this.$Router.push({path: '/pages/goods/pointlist'})
					break
					case 'checkin' :
					if(uni.getStorageSync('UId') > 0){
						this.$Router.push({
						 path: "/pages/activity/sign/index",
						});
					}else{
						uni.showToast({
							title:'您尚未登录',
							icon:"error"
						})
						break
					}
				}
			},
			jump(path, query) {
				if (uni.getStorageSync("UId") > 0) {
			
					this.$Router.push({
						path: path,
						query: query
					});
				} else {
					// #ifdef MP-WEIXIN
					uni.showToast({
						title: '请登录后操作',
						icon: 'none'
					});
					// #endif
					// #ifdef APP-PLUS
					uni.navigateTo({
						url: "/subunimodules/uni-id-pages/pages/login/login-withoutpwd?type=" + this.loginType
					})
					// #endif
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cards{
		/* #ifdef MP-WEIXIN */
		margin-top: 280rpx;
		/* #endif */
		
		/* #ifdef APP-PLUS || H5 */
		margin-top: 200rpx;
		/* #endif */
		width: 730rpx;
		margin-left: 10rpx;
		height:320rpx;
		background-color: #fff;
		border-radius: 25rpx;
		overflow: hidden;
		.swiper-item{
			color: #6c6c6c;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			overflow: hidden;
			.card{
				width: 140rpx;
				height: 145rpx;
				margin-left: 6rpx;
				// background-color: pink;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}
		
		.uni-swiper-wrapper {
			height: 320rpx;
			.uni-swiper-dot-active{
				background-color: #f00 !important;
			}
		}
		
	}

		.banner-swiper {
		    /deep/ .uni-swiper-dots {
		        bottom: 73rpx;
		    }
		    /deep/ .uni-swiper-dot {
		        width:10rpx!important;
		        height: 10rpx!important;
		        border: 1rpx solid #f5cfa4;
				transition:.2s;
		    }
		    /deep/ .uni-swiper-dot-active {
			width: 25rpx!important;
			height: 10rpx!important;
		        background: #f3a326;
		    }
		}
</style>